<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div>
        <button>发送GET请求</button>
        <button>发送POST请求</button>
        <button>发送PUT请求</button>
        <button>发送DELETE请求</button>
    </div>

    <script>
        const btns=document.querySelectorAll('button');

        // btns[0].onclick=function(){
        //     //发送axios请求
        //     axios.request({
        //         method:'GET',
        //         url:'http://localhost:3000/comments',
        //     }).then(response=>{
        //         console.log(response);
        //     });
        // }

        btns[0].onclick=function(){
            //发送axios请求
            axios.get(
                'http://localhost:3000/posts/1'// 返回一个对象
                // axios.get('http://localhost:3000/posts')  //返回一个数组，数组里有两个对象
                // axios.get('http://localhost:3000/posts?id=1') // 返回一个数组，数组里有一个对象
            ).then(response=>{
                console.log(response);
            });
        }

        btns[1].onclick=function(){
            //发送axios请求
            axios.post(
                'http://localhost:3000/comments',
                {
                    "body": "挺好的",
                    "postId": 2
                }
            ).then(response=>{
                console.log(response);
            });
        }

        //更新数据
        btns[2].onclick=function(){
            //发送axios请求
            axios.put(
                'http://localhost:3000/posts/2',
                {
                    "title": "json-server2",
                    "author": "李四" 
                }
            ).then(response=>{
                console.log(response);
            });
        }

        //删除数据
        btns[3].onclick=function(){
            //发送axios请求
            axios.delect(
                'http://localhost:3000/posts/2'
            ).then(response=>{
                console.log(response);
            });
        }
    </script>
</body>
</html>
